<template>
    <div class="wrap_header">
        <div class="left">
            <img src="https://i.yunxi.tv/9c76cc56-701b-4bd0-b2ab-a68cdbb25b31" class="logo" />
            <div class="title">COLMO AI科技家电</div>
        </div>
        <div class="btn" @click="onShow">
            <span class="plus">+</span>关注
        </div>
        <transition name="fade">
            <div class="mask" v-if="show" @click="onHide">
                <div class="dialog" @click.stop="stop" >
                    <img src="https://i.yunxi.tv/49a29a2c-fb58-43a3-9d42-589a16c9af38" />
                    <p>长按识别二维码关注</p>
                    <div class="close" @click="onHide">
                        <img src="@/assets/images/close.png" />
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    data () {
        return {
            show: false
        }
    },
    methods: {
        onShow () {
            this.show = true
        },
        onHide () {
            this.show = false
        },
        stop () {}
    }
}
</script>
<style lang="less" scoped>
.wrap_header {
    padding: 0.14rem 0.3rem 0.14rem 0.2rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
        display: flex;
        align-items: center;
        .logo {
            width: 0.8rem;
            height: 0.8rem;
            display: block;
            border-radius: 0.08rem;
            margin-right: 0.2rem;
        }
        .title {
            color: rgb(51, 51, 51);
            font-size: 0.32rem;
        }
    }

    .btn {
        min-width: 1.32rem;
        box-sizing: border-box;
        padding: 0.13rem 0.2rem;
        border-radius: 0.28rem;
        overflow: hidden;
        font-size: 0.24rem;
        display: flex;
        background-color: #c08650;
        color: #fff;
        .plus {
            margin-right: 0.16rem;
            font-size: 0.3rem;
            margin-top: -0.06rem;
            display: flex;
            align-items: center;
        }
    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        .dialog {
            padding: 0.6rem 0.6rem 0.2rem;
            background-color: #fff;
            border-radius: 0.1rem;
            position: relative;
            img {
                width: 3.4rem;
                height: 3.4rem;
                display: block;
                margin-bottom: 0.4rem;
            }
            p {
                font-size: 0.3rem;
                font-weight: 400;
                color: #99a9bf;
                font-family: PingFangSC;
                text-align: center;
            }
            .close {
                position: absolute;
                bottom: -1.2rem;
                left: 50%;
                transform: translateX(-50%);
                width: 0.82rem;
                height: 0.8rem;
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s;
    }
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
}
</style>
